<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件冒泡:
					如果将来事件有嵌套关系，执行完成内部事件之后，
					执行外部事件.这种现象称之为事件冒泡.
					1.阻止事件冒泡
					语法:
						1.v-on:click.stop="xxx"
						2.@click.stop
			 -->
			<div @click="addNum2">
				<h3>{{num}}</h3>
				<button @click.stop="addNium">增1</button>
			</div>
			<hr />
			<!-- 2.阻止默认行为 
					如果需要阻止标签的默认的行为则添加 @click.prevent
			-->
			<div>
				<h3>阻止默认行为</h3>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
			</div>
			<div>
				<h3>特殊按键字符说明</h3>
				<!-- 需求:要求用户按回车键触发 事件函数 
						.enter	.tab	.delete(捕获"删除"和"退格"键)
						.esc	.space	.up	.down	.left	.right
				-->
				回车键触发:<input name="username" type="text" v-on:keyup.enter="handler" /><br>
				删除键触发:<input name="age" type="text" v-on:keyup.delete="handler" /><br>
				<!-- tab有效 使用keydown操作 -->
				tab键触发:<input name="sex" type="text" v-on:keydown.tab="handler" /><br>
				space键触发:<input name="sex" type="text" v-on:keyup.space="handler" /><br>

			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					//key : value
					addNum() {
						this.num++
					},
					addNum2() {
						this.num = this.num + 2
					},
					baidu() {
						console.log("点击百度按钮")
					},
					handler() {
						console.log("函数被执行")
					}
				}
			})
		</script>
	</body>
</html>
